<template>
    <el-dialog title="清单子目操作日志" :visible.sync="visible" width="920px" append-to-body :close-on-click-modal="false">
        <BasePage :show-shadow="false">
            <BaseTable slot="table" ref="table" v-loading="listLoading" :data="list" :columns="columns" highlight-current-row height="284px">
                <template #operationContent="{ scope: { row } }">
                    <div style="padding-right: 8px;" v-html="row.operationContent"></div>
                </template>
            </BaseTable>
            <Pagination
                slot="pagination"
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                @size-change="getList"
                @current-change="getList"
            />
        </BasePage>
        
        <div slot="footer" class="dialog-footer">
            <BaseButton @click="cancel">确认</BaseButton>
        </div>
    </el-dialog>
</template>

<script>
import { ContractModel } from '@/models'
import BasePage from '@/layouts/BasePage'

export default {
    name: 'OperationLog',
    components: {
        BasePage,
    },
    props: {
        type: {
            type: Number,
            default: 1 // type=1:普通工程量清单；type=2:计日工
        },
    },
    data() {
        return {
            model: new ContractModel(),
            visible: false,
            submitLoading: false,
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            listLoading: false,
            columns: [
                {
                    attrs: {
                        label: '类型',
                        width: '120',
                        prop: 'typeName',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '操作人',
                        prop: 'operatorName',
                        width: '130',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'operatorOrgName',
                        label: '所属部门',
                        'min-width': '150',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '操作时间',
                        prop: 'createTime',
                        width: '160'
                    }
                },
                {
                    slot: 'operationContent',
                    attrs: {
                        label: '变更内容',
                        prop: 'operationContent',
                        'min-width': '200'
                    }
                },
            ],
            list: [],
            id: '',
        }
    },
    methods: {
        // 取消按钮
        cancel() {
            this.visible = false
        },
        open(options) {
            this.visible = true
            const { id } = options
            this.id = id
            this.getList()
        },
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        getList() {
            this.listLoading = true
            this.model
                .billLogsList({
                    billId: this.id,
                    msType: 1,
                    ...this.page
                })
                .then((res) => {
                    this.list = (res?.list || []).map(item => {
                        return {
                            ...item,
                            operationContent: item.operationContent.replace(/\n/g, '<br />')
                        }
                    })
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.w-300 {
    width: 300px;
}
</style>
